<template>
	<u-navbar :is-back="true" title-color="#117B12" :is-fixed="true" :background="{ background: 'none' }"
		:immersive="true" :border-bottom="false" :back-icon-name="isNavBack?'nav-back':'home'" :custom-back="customBack"
		v-if="isShare">
	</u-navbar>
	<view class="u-skeleton">
		<view class="swiper-box u-skeleton-rect">
			<u-swiper :list="swiperList" mode="number" indicator-pos="bottomRight" height="750" :autoplay="true"
				border-radius="0" @click="swiperClick"></u-swiper>
		</view>
		<view class="u-p-24 bgw u-m-b-20">
			<view class="u-flex u-m-b-20 u-skeleton-rect">
				<view class="u-flex-1 color-primary">
					<text>￥</text>
					<text style="font-size: 44upx;">{{detail.price}}</text>
				</view>
				<view class="u-content-color">
					已售：{{detail.salesVolume}}件
				</view>
			</view>
			<view class="u-font-32 u-m-b-20 u-skeleton-rect">
				{{detail.name||'11111'}}
			</view>
			<!-- <view class="u-content-color u-m-b-20">
				{{detail.title}}
			</view> -->
			<u-line></u-line>
			<view class="u-flex u-m-t-20 u-skeleton-rect">
				<view class="u-content-color u-m-r-20">
					当前库存
				</view>
				<view class="u-flex-1">
					{{detail.inventory}}
				</view>
			</view>
		</view>
		<view class="bgw" v-if="detail.type == 1 && productEvaluateTotal">
			<view class="u-flex u-p-24" @click="nav('/pagesSub/goodEvaluate/goodEvaluate?sid='+detail.sid)">
				<view class="u-flex-1">
					评价({{productEvaluateTotal}})
				</view>
				<view class="">
					<u-icon label-pos="left" name="arrow-right" label-color="#BBBBBB" color="#BBBBBB" label-size="24"
						size="24" label="全部"></u-icon>
				</view>
			</view>
			<evaluate-item :border="false" :detail="productEvaluate"></evaluate-item>
		</view>
		<view class="u-p-30 u-skeleton-rect">
			<u-divider bg-color="#f9f9f9">
				<text class="u-font-28">商品详情</text>
			</u-divider>
			<u-gap height="30"></u-gap>
			<!-- <view class="ql-container bgw u-p-t-30 u-p-b-30">
				<rich-text class="ql-editor" :nodes="detail.content"></rich-text>
			</view> -->
			<view class="bgw u-p-10">
				<view v-html="detail.content" class="ql-container"/>
			</view>
			
		</view>
	</view>

	<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#F9F9F9"></u-skeleton>
	<u-gap height="150"></u-gap>
	<view class="fixed-bottom u-flex" style="align-items: stretch;">
		<view class="u-p-l-30 u-p-r-20 u-flex-col" style="justify-content: center;" @click="sharePopupShow = true">
			<u-icon name="share" color="#272636" size="32" label-size="24" label="分享" label-pos="bottom"
				label-color="#999999"></u-icon>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-flex-col" style="justify-content: center;">
			<u-icon name="chat" color="#272636" size="32" label-size="24" label="客服" label-pos="bottom"
				label-color="#999999"></u-icon>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-flex-col u-rela" style="justify-content: center;"
			@click="nav('/pages/cart/cart')">
			<u-badge bgColor="#117B12" :count="cartNum[`type${detail.type}`]" size="mini" v-if="cartNum[`type${detail.type}`]"></u-badge>
			<u-icon name="shopping-cart" color="#272636" size="32" label-size="24" label="购物车" label-pos="bottom"
				label-color="#999999"></u-icon>
		</view>
		<view class="u-flex-1 u-flex btn-wrap u-p-l-10 u-p-r-30 u-p-t-20 u-p-b-20">
			<view class="btn-addcart u-flex-1" @click="popupShow = true">
				加入购物车
			</view>
			<view class="btn-buy u-flex-1" @click="popupShow = true">
				立即购买
			</view>
		</view>
	</view>

	<u-popup v-model="popupShow" mode="bottom" border-radius="14" :closeable="true">
		<view class="u-p-28">
			<item :border="false" :detail="detail"></item>
			<view class="u-font-28">
				规格
			</view>
			<view class="sku u-p-t-20">
				<view class="sku-item">
					{{detail.specifications}}
				</view>
			</view>
			<view class="u-flex u-p-t-20 u-p-b-20" v-if="detail.type == 1">
				<view class="u-flex-1 u-font-28">
					购买数量
				</view>
				<u-number-box v-model="num" :min="1" :step="1"></u-number-box>
			</view>
			<view class="u-flex btn-wrap u-p-t-20">
				<view class="btn-addcart u-flex-1" @click="addCart">
					加入购物车
				</view>
				<view class="btn-buy u-flex-1" @click="toBuy">
					立即购买
				</view>
			</view>
		</view>
	</u-popup>

	<!--分享弹出层-->
	<u-popup v-model="sharePopupShow" mode="center" border-radius="14" :closeable="true">
		<view style="width: 500upx;" class="u-p-30">
			<view class="u-text-center u-p-b-30">立即分享给好友</view>
			<view class="">
				<u-button @click="copyShareUrl" type="success" shape="circle">复制链接</u-button>
			</view>
		</view>
	</u-popup>

</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import formatRichText from '@/common/js/richText.js';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow,
		onPageScroll,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js';
	const {
		navigationBarTitle,
		shareAppMessage
	} = mixins();

	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin,
		htmlAddImgUrl
	} = proxy.$util;
	const {
		baseImgUrl
	} = proxy
	const props = defineProps({
		sid: {
			type: [String, Number],
			default: '',
		},
		isShare: {
			type: [String, Number],
			default: '',
		},
	})
	const userInfo = computed(() => store.state.$userInfo)
	const isLogin = computed(() => {
		return store.getters.get_isLogin
	})
	const cartNum = computed(() => store.state.$cartNum)
	const customBack = () => {
		if (isNavBack.value) {
			uni.navigateBack({
				fail() {
					nav('/pages/index/index')
				}
			});
		} else {
			nav('/pages/index/index')
		}
	}
	const popupShow = ref(false);
	const isNavBack = computed(v => {
		if (props.isShare) {
			return false
		}
		return true
	})
	shareAppMessage.title = '商品';
	shareAppMessage.path = '/pagesSub/goodDetail/goodDetail?isShare=1&sid=' + props.sid;

	const sharePopupShow = ref(false);
	const copyShareUrl = () => {
		sharePopupShow.value = false;
		let url = window.location.href;
		if (!url.includes('isShare')) {
			url += '&isShare=1'
		}
		uni.setClipboardData({
			data: url,
			success() {
				uni.$u.toast(`已复制商品链接至剪贴板`);
			}
		});
	}

	const num = ref(1)
	const toBuy = async () => {
		uni.showLoading({
			title: '创建订单',
			mask: true
		});
		let orderData = {
			productList: [{
				count: num.value,
				productSid: props.sid
			}],
			pickup: 1
		};
		try {
			let defaultAddress = await proxy.$u.api.getDefaultAddress();
			if (defaultAddress.data) {
				orderData.addressSid = defaultAddress.data.sid
			}
		} catch (e) {
			uni.$u.toast('错误');
		}
		proxy.$u.api.addOrder(orderData).then(res => {
			let {
				code,
				msg,
				data
			} = res;
			if (code == 200) {
				// console.log(data);
				// 24-7295a9ca6ebe4fd68da4c44429fce4fb
				navLogin('/pagesSub/editOrder/editOrder?sid=' + data)
			} else {
				uni.$u.toast(msg || '错误');
			}
		})
	}
	const addCart = () => {
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.addCart(props.sid, num.value).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			uni.$u.toast(msg || '成功');
			popupShow.value = false;
			store.dispatch('getCart',detail.type)
		}).catch(res => {

		})
	}

	const detail = reactive({})
	const swiperList = ref([])
	const swiperClick = (i) => {
		uni.previewImage({
			current: i,
			urls: swiperList.value.map(v => v.image),
			showmenu: false
		});
	}
	const skeletonLoading = ref(true)
	const getData = () => {
		if (!props.sid) {
			customBack();
			return;
		}
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.getProductDetail(props.sid).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			shareAppMessage.title = data.name;
			navigationBarTitle.value = data.name;
			if(data.content){
				data.content = htmlAddImgUrl(data.content,baseImgUrl)
				data.content = formatRichText(data.content)
			}
			for (let key in data) {
				detail[key] = data[key]
			}
			let imgs = [];
			data.bannerImage.forEach(v => {
				imgs.push({
					image: baseImgUrl + v.imagePath
				})
			})

			swiperList.value = imgs;
			skeletonLoading.value = false
			if (detail.type == 1) {
				getProductEvaluate()
			}
			if (store.getters.get_isLogin) {
				store.dispatch('getCart',detail.type)
			}
		}).catch(res => {
			// skeletonLoading.value = false
		})
	}
	const productEvaluate = ref(null)
	const productEvaluateTotal = ref(null)
	const getProductEvaluate = () => {
		proxy.$u.api.getProductEvaluate({
			sid: props.sid
		}).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			try {
				productEvaluateTotal.value = Number(data.total);
				productEvaluate.value = data.records[0]
			} catch (e) {

			}
		}).catch(res => {

		})
	}
	onReady(() => {

	})
	onLoad((d) => {
		getData()
	})
	onShow(() => {
		


	})
	onPageScroll(e => {

	})
</script>

<style lang="scss" scoped>
	.fixed-bottom {
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 28rpx 0rpx rgba(202, 206, 208, 0.3);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	// ::v-deep.u-swiper-indicator {
	// 	bottom: 70upx !important;
	// }

	.btn-addcart,
	.btn-buy {
		// width: 200upx;
		height: 80upx;
		line-height: 80upx;
		color: #ffffff;
		text-align: center;
	}

	.btn-addcart {
		background: #E88D1A;
		border-radius: 60upx 0 0 60upx;
	}

	.btn-buy {
		background: #117B12;
		border-radius: 0 60upx 60upx 0;
	}

	.sku-item {
		display: inline-block;
		padding: 20upx;
		line-height: 1;
		border-radius: 10upx;
		background: #F2FDF2;
		font-size: 24upx;
		color: #117B12;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
</style>